<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
      <el-breadcrumb-item>通知发布和查看</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-input type="textarea"
                placeholder="请输入通知内容"
                :rows="3"
                v-model="text">
      </el-input>
      <el-button type="primary"
                 @click="upInform">发布</el-button>
    </el-card>
    <el-card class="check_inform">
      <el-collapse v-model="activeNames">
        <el-collapse-item :title="item.time"
                          v-for="(item,index) in informs"
                          :key="index"
                          :name="index">
          <p class="content">{{item.inform}}</p>
          <el-button type="warning"
                     @click="removeInform(item._id)">删除</el-button>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
import { formDate } from 'commonjs/formatDate.js'
export default {
  name: 'Inform',
  props: [''],
  data () {
    return {
      text: '',
      activeNames: [0],
      informs: []
    }
  },
  created () {
    this.getInform()
  },
  methods: {
    // 发布通知
    async upInform () {
      const { data: res } = await this.$axios.post('/tower/addInform', {
        tower: window.localStorage.getItem('tower'),
        name: window.localStorage.getItem('name'),
        studentNum: window.localStorage.getItem('studentNumber'),
        inform: this.text
      })
      // console.log(res)
      if (res.meta.code === 200) {
        location.reload()
      }
    },
    // 获取过去发的通知
    async getInform () {
      const { data: res } = await this.$axios.get('/tower/findInform', {
        params: {
          tower: window.localStorage.getItem('tower'),
          limit: 'all'
        }
      })
      // console.log(res)
      if (res.meta.code === 200) {
        res.result.map(valid => {
          valid.time = formDate(valid.time)
        })
        this.informs = res.result
        // console.log(this.informs)
      }
    },
    // 删除通知
    async removeInform (id) {
      console.log(id)
      const { data: res } = await this.$axios.post('/tower/dropInform', {
        id
      })
      console.log(res)
      if (res.meta.code === 200) {
        this.$message.success(res.meta.msg)
        this.getInform()
      }
    }
  },

  watch: {}

}

</script>
<style lang='less' scoped>
.el-button {
  margin-top: 30px;
  margin-left: calc(50% - 28px);
}

.check_inform {
  margin-top: 20px;

  .content {
    text-indent: 2em;
  }
}
</style>
